<template>
  <div class="demo-split" ref="uartSplit">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane">
        <uTopPane />
      </div>
      <div slot="bottom" class="demo-split-pane">
        <uBottomPane  />
      </div>
    </Split>
  </div>
</template>
<script>
import uTopPane from "../uart/uTopPane";
import uBottomPane from "../uart/uBottomPane";
import { on, off } from "../../utils/dom";
export default {
  components: {
    uTopPane,
    uBottomPane,
  },
  data() {
    return {
      split2: 0.6,
      height: 0,
    };
  },
  computed: {
    // getTopHeight: function () {
    //   return this.$store.getters.getTopHeight;
    // },
    // getButtomHeight: function () {
    //   return this.$store.getters.getBottomHeight;
    // },
  },
  watch: {
    split2() {
      this.getUartSplitHight();
    },
  },
  methods: {
    getUartSplitHight() {
      this.height =
        parseInt(window.getComputedStyle(this.$refs.uartSplit).height) - 2;
      let topHeight = this.split2 * this.height;
      let bottomHeight = (1 - this.split2) * this.height;
      this.$store.commit("SETSPLITHEIGHT", { topHeight, bottomHeight });
    },
  },

  mounted() {
    this.getUartSplitHight();
    on(window, "resize", this.getUartSplitHight);
  },
  beforeDestroy() {
    off(window, "resize", this.getUartSplitHight);
  },
};
</script>
<style>
.demo-split {
  position: fixed;
  top: 64px;
  bottom: 20px;
  width: 100%;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 0px;
}
</style>
<style>
</style>